<template>
  <div class="data-v-cus-bar5" :style="hostStyle">
    <div v-for="(s, i) in series" :key="i" class="bar">
      <div class="bar-name">{{ s.name | upper }}</div>
      <div class="bar-item">
        <!-- <div class="bar-percentage">{{getPercentage(s.value) * 100 + "%"}}</div> -->
        <!-- <div class="bar-item-inner" :style="sty(s)"></div> -->
        <div
          class="bar-stick"
          v-for="i in stickNums"
          :key="i"
          :style="getStickSty(i, s.value)"
        ></div>
      </div>
      <div class="bar-value">{{ s.value }}</div>
    </div>
  </div>
</template>

<script>
import Color from "color-js";
// import { modifyOpacity } from "../color";
export default {
  name: "cus-bar5",
  props: ["series", "maxValue", "color"],
  data() {
    return {
      stickNums: 50,
      stickColor: Color(this.color)
        .darkenByAmount(0.2)
        .setAlpha(0.5)
    };
  },
  computed: {
    hostStyle() {
      return {
        // "--color-bg": modifyOpacity(this.color, 0.2)
      };
    }
  },
  filters: {
    upper(v) {
      return String(v).toUpperCase();
    }
  },
  methods: {
    getPercentage(value) {
      return value / this.maxValue;
    },
    sty(s) {
      return {
        width: this.getPercentage(s.value) * 100 + "%"
      };
    },
    getStickSty(index, value) {
      let cur = index / this.stickNums;
      let percentage = this.getPercentage(value);
      return {
        backgroundColor: cur < percentage ? this.color : this.stickColor
      };
    }
  }
};
</script>

<style lang="less">
.data-v-cus-bar5 {
  .bar {
    display: flex;
    height: 20px;
    align-items: center;
    position: relative;
    // border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    & + .bar {
      margin-top: 20px;
    }
    .bar-percentage {
      padding: 0 5px;
    }
    .bar-name {
      width: 100px;
      padding: 0 5px;
      // border: 1px solid rgba(255, 255, 255, 0.3);
      color: rgba(255, 255, 255, 0.8);
      text-align: right;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      height: 20px;
    }
    .bar-item {
      height: 12px;
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: space-between;
      // background: #26282b;
      position: relative;
      margin-left: 5px;
      color: rgba(255, 255, 255, 0.8);

      // border-bottom: 1px solid var(--color);
      // border: 1px solid rgba(255, 255, 255, 0.2);
    }
    .bar-value {
      width: 80px;
      color: rgba(255, 255, 255, 0.8);
      // background: var(--color-bg);
      padding-left: 10px;
      margin-left: 5px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .bar-item-inner {
      width: 0;
      height: 5px;
      border-radius: 5px;
      background: var(--color);
      transition: 0.25s;
    }
    .bar-stick {
      width: 3px;
      height: 100%;
      // background: #0E1A1C;
      background: #3d8491;
    }
  }
}
</style>
